/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
//引入计时器类库
var TimerMixin = require('react-timer-mixin');
var  EScroolViewDemo = React.createClass({
    //注册计时器
    mixins: [TimerMixin],
    //设置固定值
    getDefaultProps(){
        return{
            //每隔多少时间
            times:1000,
            imageDataArr:[],
        }
    },
    // 设置可变的初始值
    getInitialState(){
        return{
            //当前的页码
            currentpage:0,
            //标题
            title: this.props.imageDataArr[0].banner_name,
        }
    },
    render(){
        return(
            <View >
                <ScrollView
                    ref="ScrollView"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    //但一帧滚动结束
                    onMomentumScrollEnd={(e) => this.onScrollAnimationEnd(e)}
                    //开始拖拽
                    onScrollBeginDrag = {this.onScrollBeginDrag}
                    onScrollEndDrag = {this.onScrollEndDrag}
                >
                    {this.renderAllImage()}
                </ScrollView>
                {/*返回指示器*/}
                <View style={styles.pageViewStyle}>
                    {/*返回对应的标题*/}
                    <Text style={{color:'white'}}>{this.state.title}</Text>
                    {/*返回五个圆点*/}
                    <View style={{flexDirection: 'row'}}>{this.renderPageCirle()}</View>


                </View>

            </View>
        )
    },
    //调用开始拖拽
    onScrollBeginDrag()
    {
        //停止定时器
        this.clearInterval(this.timer)

    },
    onScrollEndDrag()
    {
        //停止定时器
        this.startTimer()

    },
    //实现一些复杂的操作
    componentDidMount(){
        //开启定时器
        this.startTimer();
    },
    //开启定时器
    startTimer(){
        //拿到scrollView
        var  scrollView = this.refs.ScrollView;
        var imgCount = this.props.imageDataArr.length;
        //添加定时器
        this
            .timer = this.setInterval(function () {
            var activepage = 0;
            if ((this.state.currentpage+1) >= imgCount)
            {
                activepage=0;
            }
            else
            {
                activepage =  this.state.currentpage+1;
            }
            this.setState({
                currentpage:activepage
            });
            var offsetX = activepage *width;
            scrollView.scrollResponderScrollTo({
                x:offsetX,y:0,animated:true
            });

        },this.props.times);

    },
    //返回所有的图片
    renderAllImage(){
        // 数组
        var allImage = [];
        var  ImageArr = this.props.imageDataArr;
        for (var  i=0;i<ImageArr.length;i++){
            var  imageitem = ImageArr[i];
            allImage.push(
                <Image key = {i} source={{uri: imageitem.mobile_banner_pic}}  style={{ width:width, height:150}}
                />
            )
        }
        return allImage;
    },
    //返回所有的圆点
    renderPageCirle(){
        var  indicatorArr = [];
        var style;
        var  ImageArr = this.props.imageDataArr;
        for(var i=0;i<ImageArr.length;i++){
            //判断
            style = (i==this.state.currentpage) ? {color:'orange'} : {color:'#ffffff'}
            //把圆点装入数组
            indicatorArr.push(
                <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
            )
        }
        return indicatorArr;
    },
    // 但一帧滚动结束调用
    onScrollAnimationEnd(e){
        //1.求出水平方向的偏移量
        var offSetX = e.nativeEvent.contentOffset.x;
        //2 求出当前页数
        var currentPage = Math.floor(offSetX/width);
        console.log(currentPage);
        this.setState({
            currentpage:currentPage,
            title:this.props.imageDataArr[currentPage].banner_name,
        })
    }
})

const styles = StyleSheet.create({
    pageViewStyle:{
        width:width,
        height:25,
        backgroundColor:'rgba(0,0,0,0.4)',
        position:'absolute',
        bottom:0,
        //主轴
        flexDirection:'row',
        //侧轴
        alignItems:'center',
        //设置主轴对齐方式
        justifyContent:'space-between',
    },
});

module.exports = EScroolViewDemo;